<template>
  <view class="container">
    <!-- 头部 -->
    <view @click="gochoosecity" class="header" :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
      <uni-icons type="left" size="15" @click="goback"></uni-icons>
      <text style="margin-left: 10rpx">出发：</text>
      <text>{{ city }}</text>
      <image src="../../static/images/down.png" style="width: 14rpx; height: 8rpx; margin-left: 5rpx" mode=""></image>
    </view>
    <!-- 站位盒子 -->
    <!-- <view :style="{ width: '100%', height: navheight + 'px' }"></view> -->
    <!-- 搜索 -->

    <!-- 搜索框 -->
    <view style="position: fixed; left: 0; box-sizing: border-box; width: 100%; padding: 26rpx 28rpx; background-color: #fff" :style="{ top: navheight + 'px' }">
      <view style="position: relative; top: 0; left: 0; display: flex; align-items: center">
        <image src="../../static/images/search.png" mode="" style="width: 36rpx; height: 36rpx; position: absolute; top: 30%; left: 30rpx"></image>
        <input type="text" placeholder="请输入搜索的地点" class="input" v-model="address" @input="search" />
        <uni-icons type="close" size="20" style="position: absolute; top: 25%; right: 30rpx"></uni-icons>
      </view>
    </view>
    <view :style="{ height: navheight * 2 + 'px' }"></view>
    <!-- 列表 -->
    <view class="search" id="choose" :style="{ height: listhieght + 'px' }">
      <view style="width: 100%; padding: 20rpx 0" @click="chooseendaddress(item)" v-for="(item, index) in list" :key="index">
        <view>
          <image src="../../static/mine/suggestposition.png" style="width: 26rpx; height: 26rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 30rpx; color: #333333; padding-left: 10rpx">{{ item.title }}</text>
        </view>
        <view style="padding-left: 36rpx; font-weight: 500; font-size: 26rpx; color: #666666">{{ item.address }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
export default {
  data() {
    return {
      navheight: 0, // 导航栏高度
      hometop: 0, // 顶部的距离
      listhieght: 0, // 列表的高度
      city: '请选择城市', // 选择的城市
      address: '',
      list: []
    };
  },
  methods: {
    search() {
      if (this.address == '') {
        this.list = [];
      }
      qqmap.getSuggestion({
        keyword: this.address,
        region: this.city,
        region_fix: 1,
        success: (res) => {
          console.log('搜索的地址', res);
          this.list = res.data;
        }
      });
    },
    chooseendaddress(item) {
      console.log(item);
      uni.setStorageSync('startaddress', item);
      uni.navigateBack();
    },
    goback() {
      uni.navigateBack();
    },
    gochoosecity() {
      uni.navigateTo({
        url: '/pages/choosecity/choosecity'
      });
    }
  },
  onLoad() {
    // 导航栏的高度
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  onShow() {
    // 获取剩余的高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#choose')
          .boundingClientRect((data) => {
            this.listhieght = e.screenHeight - data.top - this.navheight;
            console.log('节点离页面顶部的距离为' + this.listhieght);
          })
          .exec();
      }
    });
    console.log(uni.getStorageSync('currentcity'));
    this.city = uni.getStorageSync('currentcity') ? uni.getStorageSync('currentcity') : this.city;
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    background-color: #f8f8f8;
    font-weight: 500;
    font-size: 28rpx;
    color: #222222;
    // justify-content: space-between;
  }
  .input {
    width: 694rpx;
    height: 76rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
    padding-left: 90rpx;
    background: #f6f6f6;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
  }
  .search {
    box-sizing: border-box;
    width: 100%;
    padding: 26rpx 28rpx;
  }
}
</style>
